<template>
  <div class="goods">
    <img :src="goods.src" />
    <div class="goods_info">
      <div class="goods_name">{{ goods.name }}</div>
      <div class="goods_price">
        ￥{{ goods.n_price }}
        <s v-show="goods.o_price > 0">￥{{ goods.o_price }}</s>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CarItem",
  props: ["goods"],
};
</script>

<style lang="less" scoped>
.goods {
  width: 3.55rem;
  display: flex;
  flex-direction: column;
  img {
    width: 3.55rem;
    height: 3.55rem;
  }
  .goods_info {
    padding: 0.18rem 0.26rem 0.22rem;
    .goods_name {
      font-size: 0.28rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.15;
    }
    .goods_price {
      font-size: 0.32rem;
      display: flex;
      color: #ff6700;
      margin-top: 0.1rem;
      line-height: 1;
      s {
        font-size: 0.22rem;
        margin: 0.1rem 0 0 0.1rem;
        color: rgba(0, 0, 0, 0.54);
      }
    }
  }
}
</style>